VueCli學習筆記 Day-02 - 1Vue專案的組成從組件看組件之間的互動

一、App.vue父組件

App.vue中可以看到檔案內容結構是由<script setup></script>、<template></template>、<style></style>組成

script setup
這邊引入了src/components中的HelloWorld.vue




<script setup>
    import { RouterLink, RouterView } from 'vue-router'
    import HelloWorld from './components/HelloWorld.vue'
</script>

以HelloWorld來看
HelloWorld被使用在<div class="wrapper">中的區塊。

二、HelloWorld.vue子組件

`script setup></script>`中使用了以下語法：










<script setup>
    //defineProps()的作用是告訴子組件要接收哪些數據，且數據來自父組件
    //所以父組件import HelloWorld.vue這個子組件時要提供一個字串型的msg
    defineProps({       
        msg: {            //指定msg為組件的屬性
            type: String,   //定義msg的屬性為String
            required: true  //msg屬性是必須提供的  
             }
        })
</script>

父子關係示意圖
<template></template>中定義了基本的組件 html 結構。
<h1 class="green">{{ msg }}</h1>這邊的{{msg}}是Vue中的「文本插值」










<template>
    <div class="greetings">
        <h1 class="green">{{ msg }}</h1>
        <h3>
            You’ve successfully created a project with
            <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
            <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
        </h3>
    </div>
</template>

為什麼可以使用HelloWorld tag呢
　　因為Vue中有「自定義標籤」的特性，因此當import組件到某個檔案時，相當於將該組件定義為一個變數，並且可以在該檔案中用該變數做事。
　　所以 App.vue 的import HelloWorld from ./components/HelloWorld.vue讓我們可以在這邊用 HelloWorld 作為自定義標籤，並渲染 HelloWorld.vue 組件的內容。